<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="客户编码">
                <el-input v-model="customerCode" placeholder="请输入编码"></el-input>
            </el-form-item>
            <el-form-item label="客户简称">
                <el-input v-model="customerAbbreviation" placeholder="请输入简称"></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
                <el-input v-model="customerName" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="客户英文名称">
                <el-input v-model="customerEnglishName" placeholder="请输入英文名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="status" placeholder="请选择">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-form>

        <el-button size="mini" style="background-color:#ADD8E6 "
            v-perm:productionsystem:masterdata:customer:insert="Insert">新增</el-button>
        <el-button size="mini " style=" background-color: #90EE90"
            v-perm:productionsystem:masterdata:customer:update="Update">修改</el-button>
        <el-button size="mini" style="background-color: #FFCCCB">删除</el-button>

        <div style="display: flex; flex-direction: column; gap: 10px;">
            <el-table style="width: 100%" :data="salesorder" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="customerCode" label="客户编码" width="150"></el-table-column>
                <el-table-column prop="customerName" label="客户名称" width="150"></el-table-column>
                <el-table-column prop="customerAbbreviation" label="客户简称" width="150"></el-table-column>
                <el-table-column prop="customerPhone" label="客户电话" width="150"></el-table-column>
                <el-table-column prop="contacts" label="联系人" width="150"></el-table-column>
                <el-table-column prop="contactsPhone " label="联系人电话" width="150"></el-table-column>
                <el-table-column prop="customerType" label="客户类型" width="150"></el-table-column>
                <el-table-column prop="status" label="是否启用" width="150"></el-table-column>
                <el-table-column label="操作" width="300px">
                    <template #default="scope">
                        <el-button :row="scope.row" type="text">修改</el-button>
                        <el-button type="text" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :destroy-on-close="true" :title="title" v-model="visible">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';
let visible = ref(false)
let title = ref("");
let data = ref({});

const salesorder = [
    {
        customerCode: 'C001',
        customerName: '客户名称1',
        customerAbbreviation: '客户简称1',
        customerPhone: '13800138000',
        contacts: '联系人1',
        contactsPhone: '13800138001',
        customerType: '客户类型1',
        status: '启用',
    }]

let Insert = (salesorder) => {
    console.log(salesorder)
    visible.value = true;
    router.push(salesorder.path)
}

let Update = (salesorder) => {
    console.log(salesorder)
    visible.value = true;
    router.push(salesorder.path)
}
let close = () => {
    visible.value = false;
    loadData();
}

</script>

<style lang='scss' scoped></style>
